import React, {Component} from 'react';
import {StyleSheet, View, StatusBar} from 'react-native';
import {Content, Thumbnail, Text, Button, List, ListItem, Left, Body, Right} from 'native-base';
import {connect} from 'react-redux';
import Icon from '../../../../components/Icon';
import {Constants, themeColor, themTextColor} from '../../../../config/config';
import TabIcon from './TabIcon';

const styles = StyleSheet.create({
	headStatusContainer: {
		height: Constants.statusBarHeight,
		backgroundColor: themeColor(),
	},
	headTitleContainer: {
		height: 40,
		flexDirection: 'row',
		justifyContent: 'center',
		backgroundColor: themeColor(),
		paddingTop: 10,
	},
	headTitle: {
		fontSize: 20,
		color: themTextColor(),
	},
	headAvatarContainer: {
		height: 105,
		flexDirection: 'row',
		justifyContent: 'center',
		backgroundColor: themeColor(),
		paddingTop: 10,
		paddingBottom: 15,
	},
	headAvatar: {
		borderWidth: 1,
		borderColor: themTextColor(),
	},
	listContainer: {
		marginTop: 25,
		backgroundColor: '#ffffff'
	},
});

@connect(state => ({state: {...state.home}}))
class Me extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		return (
			<Content>
				<StatusBar animated={true} translucent={true} barStyle='light-content' />
				<View style={styles.headStatusContainer} />
				<View style={styles.headTitleContainer}>
					<Text style={styles.headTitle}>fengwk</Text>
				</View>
				<View style={styles.headAvatarContainer}>
					<Thumbnail large style={styles.headAvatar} source={require('../../../../assets/img/userIcon-test.jpg')} />
				</View>
				<List style={styles.listContainer}>
					<ListItem icon>
		              	<Left><Icon type='school' fill='#1890ff' width={20} height={20} /></Left>
			            <Body><Text>学校</Text></Body>
			            <Right><Text>台州中学</Text></Right>
		            </ListItem>
		            <ListItem icon>
		              	<Left><Icon type='subject' fill='#1890ff' width={20} height={20} /></Left>
			            <Body><Text>学科</Text></Body>
			            <Right><Text>数学</Text></Right>
		            </ListItem>
		            <ListItem icon>
		              	<Left><Icon type='grade' fill='#1890ff' width={20} height={20} /></Left>
			            <Body style={{borderBottomWidth: 0}}><Text>年级</Text></Body>
			            <Right style={{borderBottomWidth: 0}}><Text>七年级</Text></Right>
		            </ListItem>
				</List>
				<List style={styles.listContainer}>
					<ListItem icon>
		              	<Left><Icon type='collection' fill='#1890ff' width={20} height={20} /></Left>
			            <Body><Text>个人收藏</Text></Body>
		            </ListItem>
		            <ListItem icon>
		              	<Left><Icon type='resetPassword' fill='#1890ff' width={20} height={20} /></Left>
			            <Body><Text>重置密码</Text></Body>
		            </ListItem>
				</List>
				<List style={styles.listContainer}>
					<ListItem icon>
		              	<Left><Icon type='exit' fill='#1890ff' width={20} height={20} /></Left>
			            <Body><Text>退出账号</Text></Body>
		            </ListItem>
				</List>
	    	</Content>
		)
	}
	
	shouldComponentUpdate({state}) {
		if(this.props.state.tab != state.tab) {
			return false;
		}
		return true;
	}
	
}

export default Me;
